import React from 'react';
import {Select} from '../index';
import {Tool} from '../../utils';

import './index.scss';

//选择器的数据
const dataSource = [
  {value: 'zh', label: '中文'},
  {value: 'en', label: 'English'}
];

/**
 * 国际化选择组件：需要先配置react-intl。
 */
export default class Locale extends React.Component {
  static defaultProps = {
    className: ''
  };

  constructor(props) {
    super(props);
    this.state = {};
  }

  render() {
    let {className} = this.props;
    return (
      <Select
        size="small"
        style={{width: 80}}
        className={`g-locale ${className}`}
        defaultValue={this.getDefaultValue()}
        placeholder="请选择"
        dataSource={dataSource}
        onChange={this.onChange}
      />
    );
  }

  /**
   * 获取默认的语言
   */
  getDefaultValue() {
    let locale = Tool.getItem('locale') || 'zh';
    return locale;
  }

  /**
   * 监听国际化选择器的改变
   * @param locale 选中的国家
   */
  onChange(locale) {
    Tool.setItem('locale', locale);
    window.location.reload(); //刷新页面
  }
}
